/**
 * Created by Lebron James on 2018/6/7.
 */
//搜索框特效
window.onload = function() {
    function iptText() {
        var ipt = document.getElementById("ipt");
        var flag = true;
        ipt.onfocus = function() {
            if (ipt.value === "苹果电脑" && flag == true) {
                ipt.value = "";
                flag = false;
                console.log(ipt.value);
                console.log(flag);
            }
        }
        ipt.onblur = function() {
            if (this.value === "" && flag == false) {
                this.value = "苹果电脑"
                flag = true;
                console.log(ipt.value);
                console.log(flag);
            }
        }
    }

    iptText();


    var banner = new FragmentBanner({
        container: "#banner1", //选择容器 必选
        imgs: ['upload/focus1.jpg', 'upload/focus2.jpg', 'upload/focus3.jpg', 'upload/focus4.jpg', 'upload/focus5.jpg', 'upload/focus6.jpg', 'upload/focus7.jpg', 'upload/focus8.jpg'], //图片集合 必选
        size: {
            width: 720,
            height: 455
        }, //容器的大小 可选
        //行数与列数 可选
        grid: {
            line: 12,
            list: 14
        },
        index: 0, //图片集合的索引位置 可选
        type: 2, //切换类型 1 ， 2 可选
        boxTime: 4000, //小方块来回运动的时长 可选
        fnTime: 15000 //banner切换的时长 可选
    });

    // 电梯导航
    // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
    // 节流阀  互斥锁 
    var flag = true;
    // 1.显示隐藏电梯导航
    var toolTop = $(".recommend").offset().top;
    toggleTool();

    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }

    $(window).scroll(function() {
        toggleTool();
        // 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名


        if (flag) {
            $(".floor .w").each(function(i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();

                }
            })
        }



    });
    // 2. 点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function() {
        flag = false;
        console.log($(this).index());
        // 当我们每次点击小li 就需要计算出页面要去往的位置 
        // 选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 页面动画滚动效果
        $("body, html").stop().animate({
            scrollTop: current
        }, function() {
            flag = true;
        });
        // 点击之后，让当前的小li 添加current 类名 ，姐妹移除current类名
        $(this).addClass("current").siblings().removeClass();
    })
}